<template>
	<div class="announcement_detail">
		<h1>{{ detailData.title }}</h1>
		<div class="info">
			<span>作者：{{ detailData.createName }}</span>
			<span>{{ detailData.releaseTime }}</span>
			<span>浏览次数：{{ detailData.browseCount || 0 }}</span>
		</div>
		<div class="cont" v-html="detailData.content"></div>
		<div class="file" v-if="attachListData.length > 0">
			<h2>附件列表</h2>
			<p v-for="(item, index) in attachListData" :key="index">
				<span>{{ item.name }}</span>
				<el-button type="text" @click="handleDownloadFile(item)">下载</el-button>
			</p>
		</div>
	</div>
</template>

<script>
import { downloadAttach } from '@/api/openApi';
import { tbSysJournalismQueryInfo } from '@/api/system/tbSysJournalism';
export default {
	data() {
		return {
			loading: false,
			isExpend: false,
			detailData: {}
		};
	},
	computed: {
		detailId() {
			return this.$route.params.id || '';
		},
		attachListData() {
			let attachs = this.detailData.siteId;
			return this.$isJSON(attachs) ? JSON.parse(attachs) : [];
		}
	},
	filters: {
		timeFilter(input) {
			return;
		}
	},
	watch: {
		detailId: {
			handler(id) {
				this.loading = true;
				this.getAnnouncementDetail(id);
			},
			immediate: true
		}
	},
	methods: {
		//获取公告详情
		async getAnnouncementDetail(id) {
			let params = { id, isRecord: '1' };
			let result = await tbSysJournalismQueryInfo(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.detailData = !!result.data && result.data.length > 0 ? result.data[0] : {};
			}
		},

		//下载文件
		async handleDownloadFile(data) {
			let link = document.createElement('a');
			let result = await downloadAttach(data.id);
			let suffix = this.$getFileUrlSuffix(data.url);
			link.href = window.URL.createObjectURL(result.data);
			link.setAttribute('download', `${data.name}.${suffix}`);
			link.style.display = 'none';
			document.body.appendChild(link);
			link.click();
			setTimeout(() => {
				document.body.removeChild(link);
			}, 5000);
		}
	}
};
</script>

<style lang="scss" scoped>
.announcement_detail {
	flex: 1;
	padding: 20px;
	overflow: auto;
	h1 {
		font-size: 24px;
		line-height: 1.5em;
		text-align: center;
		margin-top: 20px;
	}
	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		a.link {
			font-size: 16px;
		}
		.el-button {
			padding: 0;
			font-size: 16px;
		}
	}
	.info {
		color: #909399;
		text-align: center;
		padding: 16px;
		border-bottom: solid 1px #ebeef5;
		span {
			margin: 0 16px;
		}
	}
	.cont {
		font-size: 16px;
		line-height: 2em;
		padding: 16px 0;
	}
	.file {
		padding: 16px 0;
		border-top: solid 1px #ebeef5;
		h2 {
			font-size: 16px;
			line-height: 1;
			margin-bottom: 16px;
		}
		p {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: solid 1px #ebeef5;
		}
	}
}
</style>
